import React, { useState, forwardRef, useImperativeHandle } from 'react';
import { Modal, Input, Radio, message } from 'antd';
// 引入添加、修改接口
import { adduser, edituser } from '@/api/user'
// 模态框组件
const Mymodal = forwardRef((props, ref) => {
    // 模态框展示控件数据
    let [isModalOpen, setIsModalOpen] = useState(false)
    // 当前用户信息:默认性别是男
    let [currentUser, setCurrentUser] = useState({ gender: '1' })
    // 定义模态框标题是修改还是添加
    let [title, setTitle] = useState('')
    // 表单修改事件
    let onChange = (key, e) => {
        currentUser[key] = e.target.value
        setCurrentUser({ ...currentUser })
    }
    // 控制模态框展示
    let showModal = () => {
        setIsModalOpen(true);
    };
    // 模态框确认按钮
    let handleOk = () => {
        // 关闭模态框
        setIsModalOpen(false);
        // 先判断是添加还是编辑
        if (title == '添加') {
            // 调用添加接口
            adduser(currentUser).then(res => {
                if (res.data.errNo == 0) {
                    // 添加成功并给出友好提示
                    message.success('添加成功', 1, () => {
                        // 刷新页面：也就是重新请求用户列表
                        props.getuserFn({ page: props.page })
                        // 清空表单添加历史
                        setCurrentUser({ gender: '1' })
                    })
                }
            })
        } else if (title == '编辑') {
            //  调用编辑接口
            edituser(currentUser).then(res => {
                if (res.data.errNo == 0) {
                    // 编辑成功给出友好提示
                    message.success('编辑成功', 1, () => {
                        // 重新请求用户
                        props.getuserFn({ page: props.page })
                    })
                }
            })
        }
    }
    // 模态框取消按钮
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    // 使用自带的useImperativeHandle抛出当前函数自带的数据和方法
    useImperativeHandle(ref, () => {
        return {
            // 是否显示模态框
            isModalOpen,
            // 控制显示和隐藏模态框
            showModal,
            // 修改模态框标题方法
            setTitle,
            // 修改当前用户信息的方法
            setCurrentUser
        }
    })
    return (
        <>
            <Modal okText='确认' cancelText='取消' title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <p><Input placeholder='用户名' value={currentUser.username} onChange={(e) => { onChange('username', e) }} /></p>
                <p><Input placeholder='密码' value={currentUser.password} onChange={(e) => { onChange('password', e) }} /></p>
                <p><Input placeholder='手机号' value={currentUser.mobile} onChange={(e) => { onChange('mobile', e) }} /></p>
                <p><Input placeholder='邮箱' value={currentUser.email} onChange={(e) => { onChange('email', e) }} /></p>
                <div>
                    <Radio.Group value={currentUser.gender} onChange={(e) => onChange('gender', e)} >
                        <Radio value={'1'}>男</Radio>
                        <Radio value={'2'}>女</Radio>
                        <Radio value={'3'}>保密</Radio>
                    </Radio.Group>
                </div>
            </Modal>
        </>
    );
})

export default Mymodal;
